import { NSpace } from 'naive-ui'
import Reload from './reload'
import Setting from '@/components/tables/pro-table/basic-table/components/toolbar/setting'
import { useProTableState } from '@/components/tables/pro-table/context'

/**
 * @FILENAME:  index.tsx
 *  @Description:  // toolbar组件
 * @Author: ellwood
 * @CreateDate: 2024/11/6 - 16:49
 * @Version: V1.0.0
 */
const toolbar = defineComponent({
  name: 'Toolbar',
  setup() {
    const { options } = useProTableState()
    return () => {
      const renderToolbar = () => {
        if (options.value === false)
          return null

        return (
          <NSpace>
            {options.value?.reload && <Reload />}
            {options.value?.setting && <Setting />}
          </NSpace>
        )
      }
      return (
        <div class="flex justify-between pb-4">
          <div class="font-black text-base">左边</div>
          <div class="flex items-center">{renderToolbar()}</div>
        </div>
      )
    }
  },
})

export default toolbar
